<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>小城趣播</title>
	<link rel="stylesheet" type="text/css" href="./css/api.css" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
	<div id="app" v-cloak>
		<div class="wrap flex-wrap flex-vertical">
			<div id="status-bar"></div>
			<div class="flex-con">
				<div class="main">
					<div class="logo-wrap">
						<img src="image/logo.png" alt="">
					</div>
					<div class="form-wrap">
						<div class="form-item flex-wrap">
							<i class="iconfont icon-shouji"></i>
							<input v-model="mobile" class="flex-con" type="tel" placeholder="请输入手机号码">
						</div>
						<div class="form-item flex-wrap">
							<i class="iconfont icon-mima"></i>
							<input v-model="password" class="flex-con" type="password" placeholder="请输入密码">
						</div>
					</div>
					<div class="forget-wrap flex-wrap">
						<a @click="goRegister" class="register-link" href="javascript:;">还没有账号？立即注册</a>
						<a @click="goforget" class="forget-pwd" href="javascript:;">忘记密码?</a>
					</div>
					<div class="btn-wrap">
						<button @click="login" id="submit-btn" type="button" :disabled="isDisabled"
							:class="[!isDisabled ? 'btn-active' : 'btn-active']">立即登录</button>
					</div>
					<div class="other-login-wrap">
						<div class="title">
							<span>第三方登录入口</span>
						</div>
						<div class="login-wrap flex-wrap">
							<a @click="openWeixin" class="login-btn login-weixin" href="javascript:;">
								<i class="icon icon-weixin1"></i>
							</a>
							<!-- <a @click="openQQ" class="login-btn login-qq" href="javascript:;">
								<i class="icon icon-qq"></i>
							</a> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript">
	var app;
	apiready = function () {
		// 设置禁止截屏
		if (api.systemType == 'android') {
			api.setScreenSecure({
				secure: true
			});
		}
		api.setStatusBarStyle({
			style: 'light'
		});
		$api.fixStatusBar($api.dom('#status-bar'));
		app = new Vue({
			el: '#app',
			data: {
				appName: api.appName,
				curHomeBackTriggerTimes: 1,
				maxHomeBackTriggerTimes: 2,
				mobile: '',
				password: '',
				isDisabled: true,
			},
			created: function () {
				var _this = this;
				_this.public();
				$api.setStorage('channel', '0');
				$api.setStorage('tuid', '0');
			},
			mounted: function () {
				var _this = this;
				_this.androidFinishApp();
				if (!$api.getStorage('deviceToken')) {
					_this.regDevice();
				}
				if (!!$api.getStorage('uid')) {
					api.openWin({
						name: 'main',
						url: 'html/main.html',
						slidBackEnabled: false
					});
				} else {
					_this.checkUpdate();
				}
			},
			methods: {
				watchModel: function () {
					if (this.mobile == '' || this.password == '') {
						this.isDisabled = true;
					} else {
						this.isDisabled = false;
					}
				},

				// 检查app版本更新 
				checkUpdate: function () {
					var mam = api.require('mam');
					mam.checkUpdate(function (ret, err) {
						if (ret) {
							var result = ret.result;
							if (result.update) {
								var str = '新版本号:' + result.version + ';\n更新内容:\n' + result
									.updateTip + ';\n发布时间:' + result.time;
								if (result.closed) {
									api.alert({
										title: '有新版本更新',
										msg: str,
									}, function (ret, err) {
										if (ret.buttonIndex == 1) {
											if (api.systemType == "android") {
												api.download({
													url: result.source,
													report: true
												}, function (ret, err) {
													if (ret && 0 == ret.state) {
														api.showProgress({
															title: ret
																.percent +
																"%",
															text: ''
														});
													}
													if (ret && 1 == ret.state) {
														/* 下载完成 */
														api.hideProgress();
														api.installApp({
															appUri: ret
																.savePath
														});
													}
												});
											}
											if (api.systemType == "ios") {
												api.installApp({
													appUri: result.source
												});
											}
										}
									});
								} else {
									api.confirm({
										title: '有新版本推送，是否下载安装',
										msg: str,
										buttons: ['确定', '下次再说']
									}, function (ret, err) {
										if (ret.buttonIndex == 1) {
											if (api.systemType == "android") {
												api.download({
													url: result.source,
													report: true
												}, function (ret, err) {
													if (ret && 0 == ret.state) {
														api.showProgress({
															title: ret
																.percent +
																"%",
															text: ''
														});
													}
													if (ret && 1 == ret.state) {
														/* 下载完成 */
														api.hideProgress();
														api.installApp({
															appUri: ret
																.savePath
														});
													}
												});
											}
											if (api.systemType == "ios") {
												api.installApp({
													appUri: result.source
												});
											}
										}
									});
								}
							} else {
								if (result.closed) {
									// 无更新，强制关闭
									api.alert({
										title: '无新的版本',
										msg: '应用已强制关闭',
									}, function (ret, err) {
										if (ret.buttonIndex == 1) {
											api.closeWidget({
												id: api.appId,
												silent: true
											});
										}
									});
								}
							}
						}
					});
				},

				// 点击返回两次退出应用
				androidFinishApp: function () {
					var _this = this;
					api.addEventListener({
						name: 'keyback'
					}, function (ret, err) {
						if (_this.curHomeBackTriggerTimes === _this.maxHomeBackTriggerTimes) {
							api.closeWidget({
								id: api.appId,
								silent: true
							});
						} else {
							api.toast({
								msg: api.appName + '：再按一次退出应用'
							})
						}
						_this.curHomeBackTriggerTimes++;
						setTimeout(function () {
							_this.curHomeBackTriggerTimes--;
						}, 2000);
					});
				},

				// 设备注册
				regDevice: function () {
					api.ajax({
						url: baseUrl + 'device/add',
						method: 'post',
						data: {
							values: {
								model: api.deviceModel,
								device_code: api.deviceId,
								pixelRatio: '2',
								windowWidth: api.screenWidth + '',
								windowHeight: api.screenHeight + '',
								language: api.systemType,
								appVersion: api.appVersion,
								version: api.version,
								channel: $api.getStorage('channel'),
								tuid: $api.getStorage('tuid'),
							},
						}
					}, function (ret, err) {
						if (ret && ret.status == 200) {
							$api.setStorage('deviceToken', ret.data.token);
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试'
							});
						}
					});
				},

				// 应用公共设置
				public: function () {
					api.ajax({
						url: baseUrl + 'device/index',
						method: 'get',
						data: {}
					}, function (ret, err) {
						if (ret.status == 200) {
							$api.setStorage('videos', ret.data.videos);
							$api.setStorage('pay', ret.data.pay);
						}
					});
				},

				goRegister: function () {
					api.openWin({
						name: 'register',
						url: 'html/register.html',
						slidBackEnabled: false
					});
				},

				goforget: function () {
					api.openWin({
						name: 'forget',
						url: 'html/forget.html',
						slidBackEnabled: false
					});
				},

				login: function () {
					var _this = this;
					if (!$api.getStorage('deviceToken')) {
						_this.regDevice();
					}
					setTimeout(function () {
						var regex =
							/^(?=\d{11}$)^1(?:3\d|4[57]|5[^4\D]|66|7[^249\D]|8\d|9[89])\d{8}$/g;
						if (!regex.test(_this.mobile)) {
							api.toast({
								msg: '请输入正确的手机号码',
								duration: 2000,
								location: 'bottom'
							});
							return false;
						}
						if (_this.password == '') {
							api.toast({
								msg: '密码不能为空',
								duration: 2000,
								location: 'bottom'
							});
							return false;
						}
						api.showProgress({
							title: '',
							text: ''
						});
						api.ajax({
							url: baseUrl + 'oauth/login',
							method: 'post',
							headers: {
								token: $api.getStorage('deviceToken')
							},
							data: {
								values: {
									mobile: _this.mobile,
									password: _this.password,
								},
							}
						}, function (ret, err) {
							api.hideProgress();
							if (ret) {
								api.toast({
									msg: ret.message[0]
								});
								if (ret.status == 200) {
									_this.mobile = '';
									_this.password = '';
									var token = JSON.parse(ret.data.token).code == 200 ?
										JSON.parse(ret.data.token).token : '';
									$api.setStorage('uid', ret.data.id);
									$api.setStorage('uname', ret.data.name);
									$api.setStorage('uavatar', ret.data.avatar);
									$api.setStorage('umobile', ret.data.email);
									$api.setStorage('token', token);
									api.openWin({
										name: 'main',
										url: 'html/main.html',
										slidBackEnabled: false,
										reload: true
									});
								}
							}
							if (err) {
								api.toast({
									msg: '网络错误，请稍后再试'
								});
							}
						});
					}, 500);
				},

				// 微信登录
				openWeixin: function () {
					var _this = this;
					var wx = api.require('wx');
					if (!$api.getStorage('deviceToken')) {
						_this.regDevice();
					}
					api.showProgress({
						title: '',
						text: '加载中...'
					});
					setTimeout(function () {
						wx.auth(function (ret, err) {
							if (ret.status) {
								wx.getToken({
									code: ret.code
								}, function (ret2, err2) {
									if (ret2.status) {
										wx.getUserInfo({
											accessToken: ret2.accessToken,
											openId: ret2.openId
										}, function (ret3, err3) {
											if (ret3.status) {
												var city;
												if (ret3.province == '') {
													city = !!ret3.city ?
														ret3.city : '';
												} else {
													city = ret3.province +
														(!!ret3.city ? (
																'-' + ret3
																.city) :
															'');
												}
												api.ajax({
													url: baseUrl +
														'oauth/wechat',
													method: 'post',
													headers: {
														token: $api
															.getStorage(
																'deviceToken'
																)
													},
													data: {
														values: {
															openid: ret3
																.openid,
															name: ret3
																.nickname,
															sex: ret3
																.sex,
															city: city,
															headimgurl: ret3
																.headimgurl,
															channel: $api
																.getStorage(
																	'channel'
																	),
															tuid: $api
																.getStorage(
																	'tuid'
																	),
														},
													}
												}, function (ret4,
													err) {
													api
												.hideProgress();
													api.toast({
														msg: ret4
															.message[
																0
																]
													});
													if (ret4
														.status ==
														200) {
														var token =
															JSON
															.parse(
																ret4
																.data
																.token
																)
															.code ==
															200 ?
															JSON
															.parse(
																ret4
																.data
																.token
																)
															.token :
															'';
														$api.setStorage(
															'uid',
															ret4
															.data
															.id
															);
														$api.setStorage(
															'uname',
															ret4
															.data
															.name
															);
														$api.setStorage(
															'uavatar',
															ret4
															.data
															.avatar
															);
														$api.setStorage(
															'token',
															token
															);
														if (ret4
															.data
															.email
															.length ==
															11) {
															$api.setStorage(
																'umobile',
																ret4
																.data
																.email
																);
															api.openWin({
																name: 'main',
																url: 'html/main.html',
																slidBackEnabled: false
															});
														} else {
															api.openWin({
																name: 'weixin_phone',
																url: 'html/weixin_phone.html',
																slidBackEnabled: false
															});
														}
													}
												})
											}
										})
									}
								});
							}
							if (err) {
								api.hideProgress();
								switch (err.code) {
									case -1:
										api.toast({
											msg: '网络错误，请稍后再试'
										});
										break;
									case 0:
										api.toast({
											msg: '微信已授权'
										});
										break;
									case 1:
										api.toast({
											msg: '您已取消授权'
										});
										break;
									case 2:
										api.toast({
											msg: '您已拒绝授权'
										});
										break;
									case 3:
										api.toast({
											msg: '当前设备未安装微信客户端'
										});
										break;
									default:
										break;
								}
							}
						});
					}, 500);
				},

				// QQ登录
				openQQ: function () {
					var _this = this;
					var qq = api.require('QQPlus');
					if (!$api.getStorage('deviceToken')) {
						_this.regDevice();
					}
					api.showProgress({
						title: '',
						text: '加载中...'
					});
					setTimeout(function () {
						qq.login(function (ret, err) {
							if (ret.status) {
								qq.getUserInfo(function (ret2, err2) {
									if (ret2.status) {
										var info = JSON.parse(ret2.info);
										var city;
										if (info.province == '') {
											city = !!info.city ? info.city : '';
										} else {
											city = info.province + (!!info.city ? (
												'-' + info.city) : '');
										}
										api.ajax({
											url: baseUrl + 'oauth/qq',
											method: 'post',
											headers: {
												token: $api.getStorage(
													'deviceToken')
											},
											data: {
												values: {
													openid: ret.openId,
													name: info.nickname,
													sex: info.gender ==
														'男' ? 1 : 2,
													city: city,
													headimgurl: info
														.figureurl_qq_2,
													channel: $api
														.getStorage(
															'channel'),
													tuid: $api.getStorage(
														'tuid'),
												},
											}
										}, function (ret3, err) {
											if (ret3.status == 200) {
												api.hideProgress();
												api.toast({
													msg: ret3
														.message[0]
												});
												var token = JSON.parse(ret3
														.data.token)
													.code == 200 ? JSON
													.parse(ret3.data.token)
													.token : '';
												$api.setStorage('uid', ret3
													.data.id);
												$api.setStorage('uname',
													ret3.data.name);
												$api.setStorage('uavatar',
													ret3.data.avatar);
												$api.setStorage('token',
													token);
												api.openWin({
													name: 'main',
													url: 'html/main.html',
													slidBackEnabled: false
												});
											}
										})
									}
									if (ret2) {
										api.hideProgress();
										api.toast({
											msg: ret2.msg
										});
									}
								});
							}
							if (err) {
								api.hideProgress();
								api.toast({
									msg: err.msg
								});
							}
						});
					}, 500);
				}

			},
			watch: {
				'mobile': function () {
					this.watchModel()
				},
				'password': function () {
					this.watchModel()
				},
			}
		})
	}
</script>